<%@taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="autor" content="Breezy New Media (info@breezy.cz)" />
<meta name="copyright" content="PointSpace - free website layout 2008" />
<meta name="description" content=""  />
<meta name="keywords" content="" />
<title>Advanced Databases TUE - Album Info </title>
<link rel="stylesheet" type="text/css" href="./css/default.css" media="screen" />
<link rel="stylesheet" type="text/css" href="./css/print.css" media="print" />
<script type="text/javascript" src="./scripts/swfobject.js"></script>
<script type="text/javascript" src="./scripts/ep_player.js"></script>
<script type="text/javascript" src="./scripts/ratingsys.js"></script>
<script src="http://www.google.com/jsapi?key=ABQIAAAAS6579pnBZFwkjeleCjUH5xSHa02KIQ4EC8Oh33h0PntS22EUYRTv_eXB1ntxTCDcjMBFdVOF2n7hlw" type="text/javascript"></script>
<style type="text/css">
    #rateStatus{float:left; clear:both; width:100%; height:20px;}
    #rateMe {padding:0px; margin:0px;}
    #rateMe li{float:left;list-style:none;}
    #rateMe li a:hover,
    #rateMe .on{background:url(images/star_on.gif) no-repeat;}
    #rateMe a{float:left;background:url(images/star_off.gif) no-repeat;width:12px; height:12px;}
    #ratingSaved{display:none;}
    .saved{color:red; }
</style>
</head>
<f:view>
<body>

<div id="view">
  <div id="head">
    <div id="logo">
      <a href="" class="block">&nbsp;</a>
      <h1><a href="index.html">advanced<span>Databases</span></a></h1>
      <h2><a href="index.html">the music you are looking for..!</a></h2>
    </div>
     <hr class="hidden" />
    
    <jsp:include page="userMenu.jsp"/>
    
    <hr class="hidden" />
  </div>
  
  <div id="content">
    <div id="contentBlock">
      <div class="item last">
		<table style="border:0px">
			<!--  Album Info -->
			<tr>
				<td colspan="2">
					<h4><h:outputText value="#{albumSearchEngineBean.album.name}"></h:outputText></h4>
					<f:subview id="admin1" rendered="#{loginManagerBean.isAdmin}">
						<div style="position:relative;left:-35px;top:-20px">
							<h:form>
								<h:commandLink title="Edit"  styleClass="edit" action="#{albumSearchEngineBean.editAlbum}">
									<h:graphicImage style="margin:0px;vertical-align:bottom;"  value="images/ico/edit.png"></h:graphicImage>
									<f:param name="albumKey" value="#{albumSearchEngineBean.album.id}"></f:param>
									<f:param name="artistKey" value="#{albumSearchEngineBean.album.artistId}"></f:param>
								</h:commandLink>
							</h:form>								
						</div>						
					</f:subview>
				</td>
			</tr>
			<tr>
				<td>
				 	<div>
						<div class="img-shadow">
							<h:graphicImage value="#{albumSearchEngineBean.album.image}"/>
						</div>
						<f:subview id="rating" rendered="#{!ratingsManagerBean.isAlbumRated}">
							<h:form id="ratingForm">
							<div id="rateMe" title="Rate Me" style="padding-left:20px">
								<div id="rateStatus">Rate Me...</div>
								<div id="ratingSaved">Rating Saved!</div>							
							    <h:commandLink action="#{ratingsManagerBean.insertAlbumRating}" id="_1" title="ehh..." onclick="rateIt(this)"  onmouseover="rating(this)" onmouseout="off(this)">
							    	<f:param name="rating" value="1"/>
									<f:param name="ratingMusicId" value="#{albumSearchEngineBean.album.id}"/>
									<f:param name="albumKey" value="#{albumSearchEngineBean.album.id}"></f:param>						    	
							    </h:commandLink>
							    <h:commandLink action="#{ratingsManagerBean.insertAlbumRating}" id="_2" title="Not Bad" onclick="rateIt(this)"  onmouseover="rating(this)" onmouseout="off(this)">
							    	<f:param name="rating" value="2"/>
									<f:param name="ratingMusicId" value="#{albumSearchEngineBean.album.id}"/>
									<f:param name="albumKey" value="#{albumSearchEngineBean.album.id}"></f:param>						    	
							    </h:commandLink>
							    <h:commandLink action="#{ratingsManagerBean.insertAlbumRating}" id="_3" title="Pretty Good" onclick="rateIt(this)"  onmouseover="rating(this)" onmouseout="off(this)">
							    	<f:param name="rating" value="3"/>
									<f:param name="ratingMusicId" value="#{albumSearchEngineBean.album.id}"/>
									<f:param name="albumKey" value="#{albumSearchEngineBean.album.id}"></f:param>						    	
							    </h:commandLink>
							    <h:commandLink action="#{ratingsManagerBean.insertAlbumRating}" id="_4" title="Out Standing" onclick="rateIt(this)"  onmouseover="rating(this)" onmouseout="off(this)">
							    	<f:param name="rating" value="4"/>
									<f:param name="ratingMusicId" value="#{albumSearchEngineBean.album.id}"/>
									<f:param name="albumKey" value="#{albumSearchEngineBean.album.id}"></f:param>						    	
							    </h:commandLink>
							    <h:commandLink action="#{ratingsManagerBean.insertAlbumRating}" id="_5" title="Freakin' Awesome!" onclick="rateIt(this)"  onmouseover="rating(this)" onmouseout="off(this)">
							    	<f:param name="rating" value="5"/>
									<f:param name="ratingMusicId" value="#{albumSearchEngineBean.album.id}"/>
									<f:param name="albumKey" value="#{albumSearchEngineBean.album.id}"></f:param>						    	
							    </h:commandLink>
							</div>	
							</h:form>				
						</f:subview>	
					</div>
				</td>
				<td valign="top">
						<h:form>
						<b>Artist:  </b><h:commandLink action="artistInfo" value="#{albumSearchEngineBean.album.artistId}">
							<f:param name="artistKey" value="#{albumSearchEngineBean.album.artistId}"></f:param>
						</h:commandLink>
						</h:form>
						<br/>
					<b>Released:  </b><h:outputText value="#{albumSearchEngineBean.album.launchdate}"></h:outputText>
					<br/>
					<b>Number Of Tracks:  </b><h:outputText value="#{albumSearchEngineBean.album.numberOfTracks}"></h:outputText>
					<br/>
					<b>Rating:  </b><h:graphicImage style="border:0;vertical-align:bottom" value="images/ico/rating_.#{albumSearchEngineBean.album.rating}.gif"></h:graphicImage>
					<p/>
					<a class="buyButton" href="" title="" target="_blank" rel="nofollow"><strong>Buy Album</strong></a>
				</td>
			</tr>
			
			<!--  Tracks on this album -->
			<tr>
				<td colspan="2">
					<h4>Tracks on this Album</h4>
					<f:subview id="admin2" rendered="#{loginManagerBean.isAdmin}">
						<div style="position:relative;left:-35px;top:-20px">
							<h:form>
								<h:commandLink styleClass="add" title="Add Track" action="#{trackSearchEngineBean.accessAddTrack}">
									<h:graphicImage style="margin:0px;vertical-align:bottom"  value="images/ico/add_track.png"></h:graphicImage>
									<f:param name="albumKey" value="#{albumSearchEngineBean.album.id}"></f:param>
									<f:param name="artistKey" value="#{albumSearchEngineBean.album.artistId}"></f:param>
								</h:commandLink>
							</h:form>
						</div>						
					</f:subview>					
					<h:form>
						<h:dataTable style="border-width:0" value="#{trackSearchEngineBean.tracksByAlbumKey}" var="item">
							<h:column>
								<span class="resultItem"></span>
								<h:commandLink value="#{item.name}" action="trackInfo">
									<f:param name="trackKey" value="#{item.id}"></f:param>
									<f:param name="albumKey" value="#{albumSearchEngineBean.album.id}"></f:param>
								</h:commandLink>
							</h:column>
							<h:column>
								<h:commandLink  onclick="doPlay(\"#{item.url}\",\"#{item.name}\"); javascript:EP_play(\"ep_player\"); return false;">
									<h:graphicImage style="margin:0px;vertical-align:bottom"  value="images/ico/play.png"></h:graphicImage>
								</h:commandLink>
							</h:column>
						</h:dataTable>
						<div id="flashcontent">
						</div>
						<script type="text/javascript">
							function doPlay(url, title) {
								var so = new SWFObject("scripts/ep_player.swf", "ep_player", "301", "16", "9", "#FFFFFF");
								so.addVariable("skin", "scripts/skins/micro_player/skin.xml");
								so.addVariable("file", "<location>" + url + "</location><creator>  </creator><title>" + title +"</title>");
								so.addVariable("autoplay", "true");
								so.addVariable("shuffle", "false");
								so.addVariable("repeat", "false");
								so.addVariable("buffertime", "1");
								so.write("flashcontent");
								
							}
						</script>
					</h:form>
					<p/>					
				</td>
			</tr>
			
			<!--  Other albums -->
			<tr>
				<td colspan="2">
					<h4>Other Albums for <h:outputText value="#{albumSearchEngineBean.album.artistId}"/></h4>
					<h:form>
					<t:dataTable newspaperColumns="2" newspaperOrientation="horizontal" style="border:0px" value="#{albumSearchEngineBean.albumsByArtist}" var="item">
							<h:column>
								<table>
									<tr>
										<td width="110px">
											<div class="img-shadow">
												<h:graphicImage value="#{item.image}" width="70px" height="70px"/>
											</div>
										</td>
										<td>
											<h:commandLink value="#{item.name}" action="albumInfo">
												<f:param name="albumKey" value="#{item.id}"></f:param>
												<f:param name="artistKey" value="#{item.artistId}"></f:param>
											</h:commandLink>
											<p/>	
											<b>Number Of Tracks: </b><h:outputText value="#{item.numberOfTracks}"></h:outputText>
											<br/>
											<b>Rating: </b><h:graphicImage style="border:0;vertical-align:bottom" value="images/ico/rating_.#{item.rating}.gif"></h:graphicImage>
										</td>
									</tr>
								</table>
							</h:column>
					</t:dataTable>
					</h:form>
				</td>
			</tr>		
			
			
			<!--  Comments on This Item -->
			<tr>
				<td colspan="2">
					<h4>Comments</h4>
					<div>
						<h:form>
							<f:subview id="admin1" rendered="#{loginManagerBean.isAdmin}">
								<div style="position:relative;left:-35px;top:-15px">						
									<h:commandLink title="Remove All Comments" styleClass="remove" action="#{commentsManagerBean.removeAllComments}">
										<h:graphicImage style="margin:0px;vertical-align:bottom;"  value="images/ico/comment-remove.png"></h:graphicImage>
										<f:param name="commentMusicId" value="#{albumSearchEngineBean.album.id}"></f:param>
										<f:param name="albumKey" value="#{albumSearchEngineBean.album.id}"></f:param>
									</h:commandLink>
								</div>
							</f:subview>
						</h:form>
					</div>
					<div>
						<h:form>
							<div>
								<h:inputTextarea value="#{commentsManagerBean.text}" style="width:80%;height:100px;"></h:inputTextarea>
							</div>
							<div style="padding-top:5px">
								<h:commandLink styleClass="submit" value="Submit" action="#{commentsManagerBean.insertAlbumComment}">
									<f:param name="commentMusicId" value="#{albumSearchEngineBean.album.id}"/>
									<f:param name="albumKey" value="#{albumSearchEngineBean.album.id}"></f:param>
								</h:commandLink>
							</div>
						</h:form>
					</div>
					<div>
						<h:form>
						<h:dataTable style="border:0px" value="#{commentsManagerBean.albumComments}" var="item">
							<h:column>
								<table style="border:0px">
									<tr>
										<td style="width:40px">
											<a href=""><h:outputText value="#{item.user}"/></a>
										</td>
										<td>
											<p class="info ico ico-date"><h:outputText value="#{item.date}"/></p>
										</td>
									</tr>
									<tr>
										<td colspan="2">
											<h:outputText value="#{item.comment}"/>
											<f:subview id="admin" rendered="#{loginManagerBean.isAdmin}">
												<div style="position:relative;left:-35px;top:-15px">
													<h:form>
														<h:commandLink title="Remove" action="#{commentsManagerBean.removeComment}">
															<h:graphicImage style="margin:0px;vertical-align:bottom;"  value="images/ico/comment-remove.png"></h:graphicImage>
															<f:param name="commentKey" value="#{item.id}"></f:param>
															<f:param name="albumKey" value="#{albumSearchEngineBean.album.id}"></f:param>
														</h:commandLink>													
													</h:form>								
												</div>						
											</f:subview>
										</td>
									</tr>
								</table>
							</h:column>
						</h:dataTable>	
						</h:form>					
					</div>
				</td>
			</tr>
		</table>

      </div>
      <!-- /#cols 50:50 -->
    </div>
    
    <hr class="hidden" />
    
    <div id="menuBlock">
      <div class="box boxText">
        <h3>Related:</h3>
        	<div style="position:relative;margin-left:-50px">
					<h:form>
					<t:dataTable newspaperColumns="2" newspaperOrientation="horizontal" style="border:0px" value="#{albumSearchEngineBean.topRatedAlbumsRelated}" var="item">
							<h:column>
								<table>
									<tr>
										<td width="110px">
											<div class="img-shadow">
												<h:graphicImage value="#{item.image}" width="70px" height="70px"/>
											</div>
											<h:commandLink value="#{item.name}" action="albumInfo">
												<f:param name="albumKey" value="#{item.id}"></f:param>
												<f:param name="artistKey" value="#{item.artistId}"></f:param>
											</h:commandLink>
										</td>
									</tr>
								</table>
							</h:column>
					</t:dataTable>
					</h:form>        
        	</div>
        <h3>Videos</h3>
        			<div style="display:none">
        				<span id="albumName"><h:outputText value="#{albumSearchEngineBean.album.name}"></h:outputText></span>
        				<span id="artistName"><h:outputText value="#{albumSearchEngineBean.album.artistId}"></h:outputText></span>
        			</div>
			        <div id="searchcontrol" style="position:relative;margin-left:-50px">Loading...</div>
					    <script language="Javascript" type="text/javascript">
					    //<![CDATA[
					
					    google.load("search", "1");
					
					    function OnLoad() {
					      // Create a search control
					      var searchControl = new google.search.SearchControl();
					
					      // Add in a full set of searchers
					      var localSearch = new google.search.LocalSearch();
					      searchControl.addSearcher(new google.search.VideoSearch());
					
					      // Tell the searcher to draw itself and tell it where to attach
					      searchControl.draw(document.getElementById("searchcontrol"));
					
					      // Execute an inital search
					      var text1 = document.getElementById("albumName").innerHTML;
					      var text2 = document.getElementById("artistName").innerHTML;
					      
					      searchControl.execute(text1 + ", " + text2);
					    }
					    google.setOnLoadCallback(OnLoad);
					
					    //]]>
					    </script>        
			      </div>	
    </div>
  </div>
  
  
  <div id="foot">
    <p class="fl">&copy; all rights reserved</p>
    
    
    
    <!-- /#   LINKS AND AUTHOR-SIGNATURE CANNOT BE REMOVED !!! -->
    <p class="fr"><a href="www.tue.nl" title="See more ON">TUE</a> created by <a href="http://www.tue.nl" class="ico ico-breezy">TUE</a></p>
  </div>
</div>

</body>
</f:view>
</html>
